<script setup lang="ts">
import {ref} from "vue";
import myAxios from "../../plugins/MyAxios.ts";
import {showFailToast} from "vant";

const onClickLeft = () => history.back();

const count = ref<number>()
let matchList = ref()
async function matchUserList() {
  if (count.value === undefined || count.value <= 0) {
    showFailToast("数量必须大于0")
    return
  }
  const response = await myAxios.get('/user/match', {
    params: {
      count: count.value
    }
  });
  matchList.value = response.data.data;
}

const onSearch = () => {
  matchUserList();
}
</script>

<template>
  <van-nav-bar title="麦语伙伴" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-search
      v-model="count"
      show-action
      placeholder="请输入搜索相似用户的个数"
      @search="onSearch"
  >
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>

  <div>
    <div v-for="item in matchList" :key="item.id" style="display: flex">
      <div>
        <van-image width="100" height="100" :src="item.avatarUrl" fit="cover"></van-image>
      </div>
      <div style="margin-left: 30px">
        <p>{{ item.userAccount }}</p>
        <van-tag plain type="primary" v-for="tag in JSON.parse(item.tags)" style="margin-right: 3px">{{tag}}</van-tag>
      </div>
    </div>
  </div>

</template>

<style scoped>

</style>